<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */
        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }
    </style>
</head>

<body>
<div th:replace="~{commons/commons::topbar}"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="~{commons/commons::sidebar(active='listStudent.html')}"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <form th:action="@{/admin/upload}" method="post" enctype="multipart/form-data">
                <!--&lt;!&ndash;如果msg的值不为空，则显示消息&ndash;&gt;-->
                <!--<p style="color: red;text-align: center" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>-->
                <div class="form-group">
                    <label>Excel文件</label>
                    <input type="file" name="file" id="file" class="form-control">
                </div>
                <input type="button" onclick="sendFile()" value="上传" class="btn btn-primary"/>
                <input type="button" onclick="downTemplate()" value="下载模板" class="btn btn-primary"/>
            </form>
        </main>
    </div>
</div>
<script type="text/javascript">
    function sendFile() {
        var file = $("input[name='file']").val();
        if (file == "") {
            alert("请选择上传的目标文件! ")
            return false;
        }
        //判断文件类型,我这里根据业务需求判断的是Excel文件
        var file1 = file.substring(file.lastIndexOf(".") + 1).toLowerCase();
        if(file1 != "xls" && file1 !="xlsx"){
            alert("请选择Execl文件!");
            $("input[name='file']").val("");
            return false;
        }
        //判断文件大小
        var size1 = $("input[name='file']")[0].files[0].size;
        if (size1>104857600) {
            alert("上传文件不能大于100M!");
            return false;
        }
        //这里需要实例化一个FormData来进行文件上传
        var formData = new FormData();
        formData.append("file",$("#file")[0].files[0]);
        $.ajax({
            type : "post",
            url : "http://localhost:8080/admin/upload",
            data : formData,
            processData : false,
            contentType : false,
            success : function(data){
                if (data.code == "0" && data.code == "5") {
                    alert("文件上传成功!");
                    window.location.href = "http://localhost:8080/admin/listStudent";
                }else if (data.code == "1") {
                    alert("导入的Excel表中学生年龄数据格式不正确!");
                }else if (data.code == "2") {
                    alert("导入的Excel表中学生数据存在空值!");
                    $("input[name='file']").val("");
                }else{
                    alert("导入的Excel表中数据有误，请检查上传的Excel文档（没用数据或字段格式有误或字段存在空值!");
                    $("input[name='file']").val("");
                }
            }
        });
    }
    var fileName = "学生信息模板.xlsx";
    function downTemplate() {
        window.open("/admin/downTemplate?fileName="+fileName);
    }
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"/>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" th:src="@{/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" th:src="@{/js/Chart.min.js}"></script>
</body>
</html>